<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link href="${pageContext.request.contextPath}/static/layui/css/layui.css" type="text/css" rel="stylesheet">
</head>
<body>
<form>
    <div class="demoTable">
        搜索：
        <div class="layui-inline">
            <input class="layui-input" name="nickName" id="nickName" autocomplete="off" placeholder="输入用户名">
        </div>
        <div class="layui-inline">
            <input class="layui-input" name="phone" id="phone" autocomplete="off" placeholder="输入手机号">
        </div>
        <select data-type="reload" id="sex" name="sex" lay-verify="required" autocomplete="off"
                class="layui-select">
            <option value="">请选择性别</option>
            <option value="男">男</option>
            <option value="女">女</option>
        </select>
        <select data-type="reload" id="isCheck" name="isCheck" lay-verify="required" autocomplete="off"
                class="layui-select">
            <option value="-1">请选择用户状态</option>
            <option value="1">审核通过</option>
            <option value="0">注册失败</option>
            <option value="true">正在等待审核</option>
        </select>
        <button class="layui-btn" data-type="reload" type="button">搜索</button>
    </div>
    <table id="allUser-form" lay-filter="test"></table>
</form>
</body>
<script src="${pageContext.request.contextPath}/static/js/jquery3.4.1.js"></script>
<script src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
<script>
    //Demo
    layui.use('form', function () {
        var form = layui.form;

    });
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="reCheck">重新审核</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="detail">详细/修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="reSetPwd">重置密码</a>
</script>
<script>
    layui.use('table', function () {
        var table = layui.table;
        let form = layui.form;
        //第一个实例
        table.render({
            elem: '#allUser-form'
            , url: '${pageContext.request.contextPath}/user/getUsers.handler' //数据接口
            , page: true //开启分页
            , cols: [[ //表头
                {field: 'id', title: '编号', width: "20%", sort: true},
                {field: 'nickName', title: '用户名', width: "20%"},
                {field: 'phone', title: '手机号码', width: "20%"},
                {field: 'sex', title: '性别', width: "10%"},
                {
                    field: 'state', title: '用户状态', templet: function (data) {
                        let state = data.state;
                        if (state == null) {
                            return "正在等待审核"
                        } else if (state == "1") {
                            return "审核通过";
                        } else if (state == "0") {
                            return "注册失败";
                        }
                    }
                },
                {fixed: 'right', title: '操作', width: "20%", toolbar: '#barDemo'}
            ]],
            id: "allUser-form"
        });

        //顶部筛选监听
        var $ = layui.$, active = {
            reload: function () {

                //执行重载
                table.reload('allUser-form', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        nickName: $("#nickName").val(),
                        phone: $("#phone").val(),
                        sex: $("#sex").val(),
                        isCheck: $("#isCheck").val()
                    }
                }, 'data');
            }
        };

        $('.demoTable .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        $('#sex').on('change', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        $('#isCheck').on('change', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        //监听行工具事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            if (obj.event === 'reCheck') {
                let id = data.id;
                let nickName = data.nickName;
                layer.confirm('是否重新审核' + nickName + '的帐号?', {icon: 3, title: '提示'}, function (index) {
                    $.ajax({
                        url: "${pageContext.request.contextPath}/user/reCheckUser.handler",
                        data: {
                            id: id
                        },
                        success: function (data) {
                            if (data.state) {
                                layer.msg('修改成功!', {icon: 1, time: 1000}, function () {
                                    layui.table.reload('allUser-form');
                                });
                            } else {
                                layer.msg('修改失败，请重新操作！！！', {icon: 2});
                                location.reload();
                            }
                        }
                    });
                });
            } else if (obj.event === 'detail') {
                let id = data.id;
                let nickName = data.nickName;
                layer.open({
                    type: 2,
                    title: nickName + '的详细信息:',
                    shadeClose: true,
                    shade: 0.8,
                    area: ['380px', '80%'],
                    content: '${pageContext.request.contextPath}/userPage/detailplus.handler?id=' + id, //iframe的url，
                    end: function () {
                        //执行重载
                        layui.table.reload('user-form', {
                            where: {
                                nickName: $("#nickName").val(),
                                phone: $("#phone").val(),
                                sex: $("#sex").val(),
                                isCheck: $("#isCheck").val()
                            }
                        }, 'data');
                    }
                });
            } else if (obj.event === 'delete') {
                let id = data.id;
                let nickName = data.nickName;
                layer.confirm('是否要删除' + nickName + '的帐号?', {icon: 3, title: '提示'}, function (index) {
                    $.ajax({
                        url: "${pageContext.request.contextPath}/user/deleteUser.handler",
                        data: {
                            id: id
                        },
                        success: function (data) {
                            if (data.state) {
                                layer.msg('删除成功!', {icon: 1, time: 1000}, function () {
                                    layui.table.reload('user-form', {
                                        where: {
                                            nickName: $("#nickName").val(),
                                            phone: $("#phone").val(),
                                            sex: $("#sex").val(),
                                            isCheck: $("#isCheck").val()
                                        }
                                    }, 'data');
                                });
                            } else {
                                layer.msg('删除失败，请重新操作！！！', {icon: 2});
                            }
                        }
                    });
                });
            }else if(obj.event == 'reSetPwd'){
                let id = data.id;
                let nickName = data.nickName;
                layer.confirm('是否要重置' + nickName + '帐号的密码?', {icon: 3, title: '提示'}, function (index) {
                    $.ajax({
                        url: "${pageContext.request.contextPath}/user/updateUser.handler",
                        data: {
                            id: id,
                            password:123456
                        },
                        success: function (data) {
                            if (data.state) {
                                layer.msg('密码重置成功!', {icon: 1, time: 1000}, function () {
                                    layui.table.reload('user-form', {
                                        where: {
                                            nickName: $("#nickName").val(),
                                            phone: $("#phone").val(),
                                            sex: $("#sex").val(),
                                            isCheck: $("#isCheck").val()
                                        }
                                    }, 'data');
                                });
                            } else {
                                layer.msg('重置失败，请重新操作！！！', {icon: 2});
                            }
                        }
                    });
                });
            }
        });
    });
</script>
</html>
